<template>
	<view class="billing-details">
		<RiderNavBar title="账单明细" :right="false"/>
		<view class="switch-bar">
			<view @tap="tapType(0)" class="item" :class="billType==0?'a-item':''"> 余额明细 </view>
			<view @tap="tapType(1)" class="item" :class="billType==1?'a-item':''"> 提现记录 </view>
		</view>
		<view class="content" v-if="billType==0">
			<view class="item" v-for="item in wallectList" :key="item">
				<view class="top">
					<view class="name"> {{item.info}} </view>
					<view class="price"> {{item.num}} </view>
				</view>
				<view class="bot">
					<view class="time"> {{item.create_time}} </view>
					<!-- <view class="price"> 变更后余额：20.00 </view> -->
				</view>
			</view>
			<Empty txt="暂时还没有余额明细记录~" v-if="wallectList.length==0"/>
		</view>
		<view class="content" v-else>
			<view class="item" v-for="item in txList" :key="item">
				<view class="top">
					<view class="name"> 余额提现 </view>
					<view class="price"> {{item.amount}} </view>
				</view>
				<view class="bot">
					<view class="time"> {{item.create_time}} </view>
					<!-- 提现记录  显示 -->
					<view class="status">
						{{item.status=='review'?'待审核':item.status=='reject'?'已驳回':'已通过'}}
					</view>
				</view>
			</view>
			<Empty txt="暂时还没有提现记录~" v-if="txList.length==0"/>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import RiderNavBar from '../components/RiderNavBar.vue';
	import Empty from '@/components/Empty.vue';
	import { GetWalletInfoApi, GetWalletTXInfoApi } from '@/service/rider.js'
	const billType = ref(0)
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const wallectList = ref([])
	const txList = ref([])
	const viewType= ref('')
	const tapType = (index) => {
		if(billType.value == index) return
		billType.value = index
		page.value = 1
		if(billType.value==0) {
			wallectList.value = []
			getWalletLsit()
		} else {
			txList.value = []
			getWalletTxList()
		}
	}
	const getWalletLsit = () => {
		const params = {
			page: page.value,
			page_size: pageSize.value,
			status: 0,
			type: viewType.value
		}
		GetWalletInfoApi(params).then(res => {
			total.value = res.data.total
			wallectList.value.push(...res.data.data)
		})
	}
	const getWalletTxList = () => {
		const params = {
			page: page.value,
			page_size: pageSize.value,
			type: viewType.value
		}
		GetWalletTXInfoApi(params).then(res => {
			total.value = res.total
			txList.value.push(...res.data)
		})
	}
	onLoad((e) => {
		const { type, txType } = e
		billType.value = type
		viewType.value = txType
		if(billType.value==0) {
			getWalletLsit()
		} else {
			getWalletTxList()
		}
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		if(billType.value==0) {
			getWalletLsit()
		} else {
			getWalletTxList()
		}
	})
</script>

<style lang="scss" scoped>
	.billing-details {
		.switch-bar {
			display: flex;
			.item {
				flex: 1;
				height: 40px;
				color: #333333;
				font-size: 14px;
				font-weight: 400;
				line-height: 40px;
				text-align: center;
				background: #FFFFFF;
				&.a-item {
					color: #FF3B1E;
					font-size: 16px;
					font-weight: 500;
					position: relative;
					&::before {
						display: block;
						content: '';
						width: 26px;
						height: 4px;
						position: absolute;
						bottom: 6px;
						left: 50%;
						transform: translateX(-50%);
						border-radius: 33px 33px 33px 33px;
						background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
					}
				}
			}
		}
		.content {
			padding: 10px 12px;
			.item {
				padding: 15px 10px;
				border-radius: 10px;
				background-color: #fff;
				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.name {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						line-height: 16px;
					}
					.price {
						color: #333333;
						font-size: 16px;
						font-weight: 500;
						line-height: 22px;
					}
				}
				.bot {
					margin-top: 7px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #999999;
					font-size: 12px;
					font-weight: 400;
					line-height: 14px;
					.status {
						color: #F5A623;
					}
				}
			}
		}
	}
</style>
